const IndeterminateCheckbox = React.forwardRef(
({indeterminate, ...rest}, ref) => {
const defaultRef = React.useRef();
const resolvedRef = ref || defaultRef;
React.useEffect(() => {
resolvedRef.current.indeterminate = indeterminate;
}, [resolvedRef, indeterminate]);
return <input type="checkbox" ref={resolvedRef} {...rest} />;
},
);
How to fix "Component definition is missing display name" in line 1
To fix this error, you should put a displayName on your component. This happens because your arrow function inside forwardRef doesn't have the context of your function name.
Solution one:
Put this on the final of your file.
const IndeterminateCheckbox = React.forwardRef(
({indeterminate, ...rest}, ref) => {
const defaultRef = React.useRef();
const resolvedRef = ref || defaultRef;
React.useEffect(() => {
resolvedRef.current.indeterminate = indeterminate;
}, [resolvedRef, indeterminate]);
return <input type="checkbox" ref={resolvedRef} {...rest} />;
},
);
IndeterminateCheckbox.displayName = 'IndeterminateCheckbox'
OR
You can avoid use arrow function inside forwardRef and use named functions.
const IndeterminateCheckbox = React.forwardRef(
function Component({indeterminate, ...rest}, ref) {
const defaultRef = React.useRef();
const resolvedRef = ref || defaultRef;
React.useEffect(() => {
resolvedRef.current.indeterminate = indeterminate;
}, [resolvedRef, indeterminate]);
return <input type="checkbox" ref={resolvedRef} {...rest} />;
}
},
);